<template>
  <ul class="header-navbar">
    <li class="header-navbar__item">
      <router-link to="/">首页</router-link>
    </li>
    <li
      class="header-navbar__item"
      v-for="item in categoryList"
      :key="item.id"
      @mouseenter="categoryStore.showSub(item)"
      @mouseleave="categoryStore.hideSub(item)"
    >
      <router-link
        :to="`/category/index/${item.id}`"
        @click="categoryStore.hideSub(item)"
        >{{ item.name }}</router-link
      >
      <div class="second-box" :class="{ open: item.open }">
        <ul class="navbar-second">
          <li
            class="navbar-second__item"
            v-for="child in item.children"
            :key="child.id"
          >
            <router-link
              :to="`/category/sub/${child.id}`"
              @click="categoryStore.hideSub(item)"
            >
              <img :src="child.picture" :alt="child.picture" />
              <p>{{ child.name }}</p>
            </router-link>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useCategoryStore } from '@/store/modules/category'
import { storeToRefs } from 'pinia'
defineOptions({
  name: 'HeaderNav'
})

const categoryStore = useCategoryStore()
const { categoryList } = storeToRefs(categoryStore)
</script>

<style lang="scss" scoped>
.header-navbar {
  position: relative;
  display: flex;
  margin-left: 40px;

  &__item {
    margin-right: 40px;
    width: 38px;

    &:hover {
      > a {
        color: $xtx-color;
        border-bottom: solid 1px $xtx-color;
      }
    }

    a {
      display: inline-block;
      height: 2rem;
      font-size: 1rem;
      line-height: 2rem;
    }
  }

  .second-box {
    position: absolute;
    top: 52px;
    left: -240px;
    z-index: 999;
    overflow: hidden;
    padding: 0 70px;
    width: 1240px;
    height: 0;
    background-color: $basic-white;
    opacity: 0;
    box-shadow: 0 0 5px #ccc;
    transition: all 0.3s 0.1s;
    flex-wrap: wrap;

    &.open {
      height: 132px;
      opacity: 1;
    }

    .navbar-second {
      display: flex;
      align-items: center;
      height: 132px;

      &__item {
        padding: 0 25px;
        text-align: center;
        cursor: pointer;

        &:hover {
          p {
            color: $xtx-color;
          }
        }

        img {
          width: 60px;
          height: 60px;
        }

        p {
          padding-top: 10px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
